<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>test</title>
    <meta name="Description" content="" />
    <meta name="Keywords" content="" />
    <script type="text/javascript" src="../src/ichart.core.js"></script>
    <script type="text/javascript" src="../src/ichart.element.js"></script>
    <script type="text/javascript" src="../src/ichart.html.js"></script>
    <script type="text/javascript" src="../src/ichart.painter.js"></script>
    <script type="text/javascript" src="../src/ichart.component.js"></script>
    <script type="text/javascript" src="../src/ichart.legend.js"></script>
    <script type="text/javascript" src="../src/ichart.label.js"></script>
    <script type="text/javascript" src="../src/ichart.chart.js"></script>
    <script type="text/javascript" src="../src/ichart.custom.js"></script>
    <script type="text/javascript" src="../src/ichart.sector.js"></script>
    <script type="text/javascript" src="../src/ichart.sector2d.js"></script>
    <script type="text/javascript" src="../src/ichart.sector3d.js"></script>
    <script type="text/javascript" src="../src/ichart.rectangle.js"></script>
    <script type="text/javascript" src="../src/ichart.rectangle2d.js"></script>
    <script type="text/javascript" src="../src/ichart.rectangle3d.js"></script>
    <script type="text/javascript" src="../src/ichart.column.js"></script>
    <script type="text/javascript" src="../src/ichart.column2d.js"></script>
    <script type="text/javascript" src="../src/ichart.bar.js"></script>
    <script type="text/javascript" src="../src/ichart.bar2d.js"></script>
    <script type="text/javascript" src="../src/ichart.barstacked2d.js"></script>
    <script type="text/javascript" src="../src/ichart.columnmulti2d.js"></script>
    <script type="text/javascript" src="../src/ichart.columnstacked2d.js"></script>
    <script type="text/javascript" src="../src/ichart.columnstacked3d.js"></script>
    <script type="text/javascript" src="../src/ichart.columnmulti3d.js"></script>
    <script type="text/javascript" src="../src/ichart.barmulti2d.js"></script>
    <script type="text/javascript" src="../src/ichart.column3d.js"></script>
    <script type="text/javascript" src="../src/ichart.tip.js"></script>
    <script type="text/javascript" src="../src/ichart.text.js"></script>
    <script type="text/javascript" src="../src/ichart.pie.js"></script>
    <script type="text/javascript" src="../src/ichart.pie2d.js"></script>
    <script type="text/javascript" src="../src/ichart.donut2d.js"></script>
    <script type="text/javascript" src="../src/ichart.pie3d.js"></script>
    <script type="text/javascript" src="../src/ichart.coordinate.js"></script>
    <script type="text/javascript" src="../src/ichart.crosshair.js"></script>
    <script type="text/javascript" src="../src/ichart.linesegment.js"></script>
    <script type="text/javascript" src="../src/ichart.line.js"></script>
    <script type="text/javascript" src="../src/ichart.linebasic2d.js"></script>
    <script type="text/javascript" src="../src/ichart.area2d.js"></script>
    <script type="text/javascript" src="../plugin/ichart.gauge2d.js"></script>
    <script type="text/javascript" src="../plugin/ichart.slider.js"></script>
    <style type="text/css">
        html{
            height: 100%;
            padding: 0px;
            margin: 0px;
        }
        body {
            height: 100%;
            padding: 0px;
            margin: 0px;
            text-align: center;
            background-repeat: repeat;
            background-color: #0c1b38;
        }
        #canvasDiv {
            margin: 0px auto;
            text-align: center;
            color:#0d8ecf;
        }
    </style>
    <script type="text/javascript">
        $(function(){
            var data = [
                {name : 'IE',value : 35.7,color:'#cad6ee'},
                {name : 'IE',value : 62.4,color:'#cad6ee'},
                {name : 'IE',value : 80.8,color:'#cad6ee'},
                {name : 'Chrome',value : 42.6,color:'#cad6ee'},
                {name : 'Firefox',value : 24.8,color:'#cad6ee'},
                {name : 'Safari',value : 6.7,color:'#cad6ee'},
                {name : 'Opera',value : 1.4,color:'#cad6ee'},
                {name : 'Other',value : 0.6,color:'#cad6ee'}
            ];

            new iChart.Column2D({
                render : 'canvasDiv',
                data: data,
                title: {
                    text:'Top 5 Browsers from 1 to 29 Feb 2012',
                    color:'#eff1f5'
                },
                fit:true,
                //showpercent:true,
                //decimalsnum:2,
                width : 800,
                height : 400,
                background_color:"#6b82ae",
                sub_option:{

                },
                coordinate:{
                    grid_color:'#8a9ec2',
                    axis:{
                        width:0
                    },
                    yAxis:{
                        label:{
                            color:"#cad6ee"
                        },
                        scale_enable:false,
                        labels:[0,1,5,10,50,100]
                    },
                    xAxis:{
                        label:{
                            color:"#cad6ee"
                        }
                    }
                }
            }).draw();
        });
    </script>
</head>
<body>
<div id='canvasDiv' style="width: 100%;height:100%;"></div>
</body>
</html>
